<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn01">这是一个按钮</button>

    <div class="s1">第一个div</div>
    <div class="s1">第二个div</div>
    <div class="s1">第三个div</div>
    <div class="s1">第四个div</div>
    <div class="s1">第五个div</div>
    <div title="t31244">第五个div</div>

    <span title="t1">第一个span</span>
    <span title="t1">第一个span</span>
    <span title="t1">第一个span</span>
    <span title="t1">第一个span</span>
    <span title="t33333">与众不同的span</span>
    <span title="t3">第一个span</span>

    <form action="javascript:;">
        <input type="text" name="username">
        <input type="radio" name="gender" value="female"> 女
        <input type="radio" name="gender" value="male"> 男
    </form>

    <script>
        document.title="元素节点"
        /* 
            元素（element）节点对象：
                在网页中，每一个标签都是一个元素节点
        
            如何获取元素节点对象？
                (1).通过doucment对象来获取元素节点

                    1.document.getElementsById()             
                        根据id来获取一个元素节点对象

                    2.document.getElemrntsByClassName()     
                        根据元素的class属性值获取一组元素节点对象。
                        该方法返回的结果是一个实时更新的集合(HTMLCollection)（当网页中新添加元素时，集合也会时实时添加）

                    3.document.getElementsByTagName()
                        根据标签名来获取一组元素节点对象。
                        返回的结果是一个可以实时更新的集合(HTMLCollection)
                        document.getElementsByTagName("*") 表示获取页面中的所有元素节点。
                    
                    4.document.getElementsByName()
                        根据name属性来获取一组元素的节点对象（主要用在表单中）
                        返回一个实时更新的集合（NodeList）

                    5.document.querySelectorAll()
                        根据选择器去页面中查询元素
                        返回的是一个NodeList,（不会实时更新）类数组，没有就返回一个空数组。

                    6.document.querySelector()
                        根据选择器去页面中查询第一个符合条件的元素，就相当于document.querySelectorAll()[0]


                (2).通过document对象来创建元素节点

                    1.document.createElement()
                        根据标签名来创建元素节点对象
            
        */







    // document.getElementsById()      根据id来获取一个元素节点对象
    const btn=document.getElementById("btn01")
    console.log(btn);

    // document.getElemrntsByClassName()   根据元素的class属性值获取一组元素节点对象
    const divs=document.getElementsByClassName("s1")

    console.log(divs)
    console.log(divs.length)    // 这样就获取它的长度
    
        // 遍历
        for (let i of divs){
            console.log(i)
            i.innerText="都是不同的div"
        }

    // document.getElementsByTagName()   根据标签名来获取一组元素节点对象
    const t1s=document.getElementsByTagName("span")
    const t2s=document.getElementsByTagName("*")
    console.log(t1s);
    console.log(t2s);
    
    // document.getElementsByName()     根据name属性来获取元素节点对象
    const genderInput=document.getElementsByName("gender")

    // document.querySelectorAll()      根据选择器去页面中查询元素
    const span_t3=document.querySelectorAll('span[title^="t3"]')
    const span_t3_1=document.querySelector('span[title^="t3"]')
    const span_t3_2=document.querySelectorAll('span[title^="t3"]')[0]

    console.log(span_t3_1===span_t3_2)  // true



    // document.createElement() 根据标签名来创建元素节点对象
    const h2=doucment.createElement("h2")       // 表示创建了一个新的标签h2,但是这里创建的元素节点并没有插入到网页中。
    </script>

</body>
</html>